<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta charset="utf-8" name="viewport" content="width=device-width,initial-scale=1.0">
	<script type="text/javascript" src="hammer.js"></script>
	<style type="text/css">
		*{margin: 0;padding: 0;list-style: none;text-decoration: none}
		.ul1{
			border-top:1px solid gray;
		}
		.li1{
			border-bottom: 0.5px solid gray;background: #ccc;
			width: 100%;height:50px;position: relative;
			line-height: 50px;overflow: hidden;
		}
		.msg{
			margin-left: 15px;
			text-align: left;
		}
		.ii{width: 15px;height: 15px;border-radius: 50%;
			background: lightblue;display: inline-block;margin-right: 5px;
		}
		.btn{
			width: 100px;position: absolute;top: 0;right: 0;background: red;
		}
		.rend{
			background: #3390FF;display: inline-block;
			width: 50px;height:50px;line-height:20px;color: white;padding: 5px;box-sizing: border-box;
			position: absolute;top: 0;right: -50px;
		}
		.del{
			background: red;color: white;display: inline-block;text-align: center;
			height: 50px;width:50px;line-height: 50px;
			position: absolute;top: 0;right: -50px;
		}
		/*.del::after{
			content: '';
			display: inline-block;
			clear:both;
		}*/
	</style>
</head>
<body>
	<ul id="ul1">
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息1</div>
			<div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息2</div>
			<div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息3</div>
			<div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
		<li class="li1">
			<div class="msg"><i class="ii"></i>短息4</div>
			<div class="btn">
				<a href="#" class="rend">隐藏提醒</a>
				<a href="#" class="del">删除</a>
			</div>
		</li>
	</ul>
	<script type="text/javascript">
		window.onload=function(){
			let oli=document.querySelectorAll('.li1');				
				Array.from(oli).forEach(li=>{
					let hammer=new Hammer(li,{});
					hammer.on('swipeleft',function(){
						Array.from(oli).forEach(li=>{//先把他隐藏
							li.children[1].children[1].style.transition='0.5s all ease';
							li.children[1].children[0].style.transition='0.5s all ease';
							li.children[1].children[0].style.right='-50px';
							li.children[1].children[1].style.right='-50px';
						})
						//再把他亮出来
						li.children[1].children[1].style.transition='0.5s all ease';
						li.children[1].children[0].style.transition='0.5s all ease';
						li.children[1].children[0].style.right='50px';
						li.children[1].children[1].style.right='0px';
					});
					hammer.on('swiperight',function(){
						li.children[1].children[1].style.transition='0.5s all ease';
						li.children[1].children[0].style.transition='0.5s all ease';
						li.children[1].children[0].style.right='-50px';
						li.children[1].children[1].style.right='-50px';
					});
					let del=document.querySelectorAll('.del');
					let oul=document.getElementById('ul1');
					Array.from(del).forEach(del=>{
						del.onclick=function(){
							let lii=del.parentNode.parentNode;
							lii.style.height=0;
							lii.style.transition='0.6s all ease';
							// lii.addEventListener('transitionend',function(){
								// lii.parentNode.removeChild(lii)
							// },false)
							setTimeout(function(){
								lii.parentNode.removeChild(lii)
							},600)
						};
					});
					let rend=document.querySelectorAll('.rend');
					Array.from(rend).forEach(rend=>{
						rend.onclick=function(){
							let lii=rend.parentNode.parentNode;
							lii.children[0].children[0].style.height=0;

							lii.children[1].children[1].style.transition='0.5s all ease';
							lii.children[1].children[0].style.transition='0.5s all ease';
							lii.children[1].children[0].style.right='-50px';
							lii.children[1].children[1].style.right='-50px';
						}
					})
				});
		};
	</script>
</body>
</html>